:root 
{
    --data-columns: 2;
    --menu-columns: 6;
    --lap-columns: 2;
    --graph-width:800px;
}

body 
{
    font-family: 'Roboto', sans-serif;
    background-color: black;
    background: url(background.png);
    color: white;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.menu a:link, .menu a:visited, .menu a:hover, .menu a:active
{
    color: white;
}

a:link, a:visited, a:hover, a:active 
{
    color: white;
}

table 
{
    margin: 10px;
}

.content
{
    padding-left: 2%;
    padding-right: 2%;
}

h2
{
    display: block;
    clear: both;
}

h4
{
    padding-bottom: 30px;
}

.top 
{
    background: #ED1B24;
    width: 100%;
    padding: 0px;
    margin: 0px;
    padding-bottom: 1px;
}

td 
{
    vertical-align: top;
}

img 
{
    max-width: 100%;
    height: auto;
}

.menu 
{
    color: white;
    font-size: 16pt;
    text-align: center;

    background: linear-gradient(#D6D5D6,#A1A1A1);
    padding: 0px;
    border-top: 1px solid black;
    text-shadow: 1px 1px rgb(92, 92, 92);
}

.menu_category
{
    padding: 3px 0px;
    border-bottom: 1px #888888 solid;
    column-count: var(--menu-columns);
}

h1
{
    padding-top: 20px;
}

.eventmenu
{
    color: #ED1B24;
    column-count: var(--menu-columns);
}

.menu_item, .eventmenu_item
{
    padding: 10px 0px;
    font-size: 16pt;
    white-space: nowrap; 
}

.menu_item
{
    padding: 10px 20px;
    display: inline;
}

.menu_item_button 
{
    background: none!important;
    border: none;
    padding: 0!important;
    text-decoration: underline;
    cursor: pointer;
}

.rounds 
{
}

.round, .race_status 
{
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 5px;
    min-width: 15em;
    flex-wrap: wrap;
}

.round
{
    background: #05050599;
    border-bottom: 1px #ff000099 solid;
    padding-top: 30px;
    padding-bottom: 30px;
}

.race_status 
{
    display: inline-block;
    width: 350px;
}

.race 
{
    display: block;
    min-height: 10em;
    margin-bottom: 40px;
}

.race_container
{
    background: #05050599;
    display: inline-block;
}

h4 
{
    margin: 2px;
}

h2 
{
    display: inline-block;
    padding-right: 10px;
}

.race_pilot, .race_channel_color, .race_channel, .race_result 
{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.race_result 
{
    text-align: right;
}

.race_pilot 
{
    width: 200px;
}

.race_channel_color
 {
    width: 10px;
    height: 10px;
}

.race_channel 
{
    width: 10px;
}

.lap_time, .lap_behind, .lap_position 
{
    min-width: 6em;
    text-align: right;
}

.time 
{
    float: right;
    text-align: right;
    font-size: 40pt;
    display: inline;
    padding: 20px;
}

.position, .pilots, .holeshot, .racetime, .laps, .lap, .t, .p, .r, .e, .c, .f, .a, .total, .channel, .channel_color
{
    padding: 5px;
    font-weight: 600;
    font-size: 12pt;
    
    text-align: right;
    display: inline-block;
    height: 20px;
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.channel_color
{
    width: 10px;
    height: 10px;
    margin: 5px;
}

.position
{
    text-align: left;
}

.pilots 
{
    text-align: left;
    width: 120px;
}

.racetime
{
    width: 80px;
}

.holeshot
{
    width: 70px;
}

.columns 
{
    padding: 20px;
    margin: 0px;
    background: #05050599;
}

.current_status
{
}

.row 
{
    white-space: nowrap;
}

.t, .p, .r, .e, .c, .f, .a 
{
    width: 40px;
    text-align: right;
}

.acpi 
{
    color: red;
}

.toplink
{
    background: #565656;
    display: inline-block;
    margin: 0px;
    width: 20%;
    padding: 10px;
}

.cell_numeric
{
   text-align: right;
}


.race_lap, .pilot_lap
{
    padding:20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin:5px;    
    background: #05050599;
    min-width: 15em;
    width: 450px;
    display:inline-block;
}

.pilot_lap
{
    width: 100px;
}

.race_laps, .pilot_laps
{
}

.loading
{
    margin-left: auto;
    margin-right: auto;
}

.graph
{
    padding: 0px;
    width: var(--graph-width);
}

.clubs
{
    column-count: var(--lap-columns);
}
